<!DOCTYPE html>
<html>
	<head>
		<title>Nested lists</title>
		<style type="text/css">
			body
			{
				font-family:sans-serif;
			}
			ol.upperRoman
			{
				list-style-type:upper-roman;
			}
			ol.lowerAlpha
			{
				list-style-type:lower-alpha;
			}
			ol.decimal
			{
				list-style-type:decimal;
			}
			ul.circle
			{
				list-style-type:circle;
			}
			ul.square
			{
				list-style-type:square;
			}
			ul.disc
			{
				list-style-type:disc;
			}
		</style>
	</head>
	<body>
		<p>Precending Text</p>
		<ol class="upperRoman">
			<li>
				List item 1
				<ol class="lowerAlpha">
					<li>Nested item 1.1</li>
					<li>Nested item 1.2</li>
				</ol>
			</li>
			<li>
				List item 2
				<ol class="decimal">
					<li>Nested item 2.1</li>
					<li>
						Nested item 2.2
						<ul class="circle">
							<li>Nested item 2.2.1</li>
							<li>
								Nested item 2.2.2
								<ul	class="square">
									<li>Nested item 2.2.2.1</li>
									<li>Nested item 2.2.2.2</li>
								</ul>
							</li>
							<li>Nested item 2.2.3</li>
						</ul>
					</li>
					<li>Nested item 2.3</li>
				</ol>
			</li>
			<li>
				List item 3
				<ul class="disc">
					<li>Nested item 3.1</li>
					<li>Nested item 3.1</li>
					<li>Nested item 3.1</li>
				</ul>
			</li>
		</ol>
	</body>
</html>